<template>
	<section class="main">
		<h3 class="nametitle">{{title}}</h3>
		<aside class="main_detail">
			<div class="top">
				<div class="left">
					<div class="pic" v-if="headImg!=null && headImg!=''">

					<!--<img src="../../assets/header_pic.png"/>-->
					<img :src="headImg" />
					</div>
          <div class="pic" v-else>
            <img :src="image ? image : require('../../assets/header_pic.png')"/>
          </div>
					<div class="txt">
						<span class="name">{{username}}</span>
						<div class="upImg">
							<a class="text">修改头像</a>
							<input type="file" class="files" accept="image/*" />
						</div>
					</div>

				</div>
				<div class="right right2">
					<a href="javascript:void(0);" class="signOut" @click="signOut()">退出登录</a>
				</div>
			</div>
      <div class="right right1" style="margin-right: 7%;float: right">
        <a href="javascript:void(0);" class="signOut" @click="signOut()">退出登录</a>
      </div>
      <aside class="list">
        <ul >
          <li >
            <router-link to="/myList">我的商标</router-link>
          </li>
          <li>
            <router-link to="/declareList">我的专利</router-link>
          </li>
          <li >
            <router-link to="/softList">我的软著</router-link>
          </li></ul>
      </aside>
			<div class="bottom">
				<ul>
					<li>
						<label class="name">公司名称：</label>
						<input type="text" class="text" v-model.trim="companyName" />
					</li>
					<li>
						<label class="name">公司地址：</label>
						<input type="text" class="text" v-model.trim="companyAddress" />
					</li>
					<li>
						<label class="name">联系方式：</label>
						<input type="text" class="text" v-model.trim="companyPhone" maxlength="11" />
					</li>
					<div class='btn'>
						<a href="javascript:void(0);" class="save" @click="save()">保存</a>
          <!--  <a @click="tokentest()">修改token测试</a>-->
					</div>
				</ul>

			</div>

		</aside>
	</section>
</template>

<script>
	export default{
		data (){
			return {
				title:"个人信息",
				username:'',
        headImg:'',
				image:'',
				companyName:'',
				companyAddress:'',
				companyPhone:'',
				userId:'',//用户的id
			/*	refreshToken:sessionStorage.getItem("refleshToken"),
				token:sessionStorage.getItem("token")*/
        token:localStorage.getItem('token'),
        refreshToken:localStorage.getItem('refleshToken')
			}

		},
		created(){
			this.setTitle();
			this.setActive();
			this.getPersonInfo();
		},
    mounted(){
      let that=this;
      window.onresize=()=>{
        return (() => {
          window.screenWidth = document.body.clientWidth
          that.screenWidth = window.screenWidth
        })()
      }
    },
   /* watch:{
      screenWidth(val){
        if(val>768){
          if($(".rigth1").is(':visible')){
            $(".rigth1").hide();
          }
          $(".right2").show();
        }else{
          $(".rigth1").show();
          $(".right2").hide();
        }
      }
    },*/
		methods:{
			setTitle(){
				//设置上面的标题
				this.$emit("getTitle",this.title);
			},
			setActive(){
				//设置左侧的菜单高亮
				this.$root.Bus.$emit("nowActive","1000")
			},
			getPersonInfo(){
				this.$ajax.get(this.global.url+"/api/user/getUserInfo").then(res=>{
					let data=res.data;
					if(data.code=="200"){
						if(data.data){
							this.username=data.data.userName;
							this.image=data.data.image;
							this.headImg=data.data.headImg;
							this.companyName=data.data.companyName;
							this.companyAddress=data.data.companyAddress;
							this.companyPhone=data.data.contact;
							this.userId=data.data.id;//用户的id
						}
					}
				})
			},
			signOut(){
				//退出登录
				this.$ajax.post(this.global.url+"/api/user/logotu",{
					refreshToken:this.refreshToken,
					token:this.token
				}).then(res=>{
					let data=res.data;
					if(data.code=="0"){
						this.$store.commit('del_token');
						this.$store.commit('del_refleshToken');
            sessionStorage.removeItem('userInfo');
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');
            localStorage.removeItem('refleshToken');
            localStorage.removeItem("openid");
            localStorage.removeItem("headImg");
            console.log("123")
						this.$router.replace('/login');


					}
					else{
            this.$store.commit('del_token');
            this.$store.commit('del_refleshToken');
            sessionStorage.removeItem('userInfo');
            localStorage.removeItem('userInfo');
            localStorage.removeItem('token');
            localStorage.removeItem('refleshToken');
            localStorage.removeItem("openid");
            console.log("123");
            this.$router.replace('/login');
					/*	this.$layer.msg('退出失败');*/
					}
				}).catch(error=>{
					console.log(error);
				})
			},
			save(){
				//保存
				var reg=/^0?1[3|4|5|8][0-9]\d{8}$/;
				if(this.companyPhone!='' && !reg.test(this.companyPhone)){
					this.$layer.msg("请输入正确的手机号码");
					return false;
				}
				this.$ajax.post(this.global.url+"/api/user/updateUserInfo",{
					id:this.userId,
					companyName:this.companyName,
					companyAddress:this.companyAddress,
					contact:this.companyPhone
				}).then(res=>{
					let data=res.data;
					if(data.code=='0'){
						this.$layer.msg('保存成功')
					}
					else{
						this.$layer.msg(data.msg)
					}
				}).catch(error=>{
					console.log(error)
				})
			},
      tokentest(){
        alert(localStorage.getItem("token"))
			  localStorage.setItem("token","1"+localStorage.getItem("token"))
        alert(localStorage.getItem("token"))
      }
		}
	}
</script>

<style scoped>
.main{
	padding: 2.5rem 3.9% 0px 2.6%;
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
.main_detail{
	padding-top:2.2rem;
	background: #fff;
	min-height: 100%;
}
/**新增**/
.list{
  width: 100%;
  background: #fff;
  padding:3.3rem 5% 0rem 5.3%;
}
.list ul{
  width:100%;
  overflow: hidden;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-direction: row;
  -moz-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  -moz-align-items: stretch;
  -ms-align-items: stretch;
  -o-align-items: stretch;
  align-items: stretch;
}
.list li{
  /*width:25%;*/
  -webkit-flex:0 0 25%;
  -moz-flex:0 0 25%;
  -ms-flex:0 0 25%;
  -o-flex:0 0 25%;
  flex:0 0 25%;
  padding-right:20px;
  /*height:48px;*/
  margin-bottom: 20px;
  overflow: hidden;
}
.list li a{
  display: block;
  position: relative;
  font-size:14px;
  line-height:32px;
  background: #eaecef;
  padding:8px 0px 8px 2rem;
  width:100%;
  height:48px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list li a:before{
  content:"";
  width:6px;
  height:6px;
  background: #53306c;
  position: absolute;
  left:1.2rem;
  top:50%;
  margin-top:-3px;
}
.nametitle{
  font-size: 1.5rem;
  color:#53306c;
  text-align: center;
  line-height: 2.5rem;
  margin-bottom: 1.5rem;
  margin-top:1.5rem;
  display: none;
}
/**新增**/
.top{
	border-bottom: 1px solid #f2f2f2;
	padding:0px 5% 1.6rem 5.9%;
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.top .left{
	/*float: left;*/
	overflow: hidden;
	display: flex;
	flex-direction: row;
	justify-content: center;
}
.top .pic{
	width:4.6rem;
	height:4.6rem;
	border-radius: 50%;
	overflow: hidden;
	/*float: left;*/
	margin-right:20px;
}
.top .pic img{
	width:100%;
	height:100%;
	overflow: hidden;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.top .txt{
	    display: flex;
    flex-direction: column;
    justify-content: center;
}
.top .txt .name{
	font-size:18px;
	color:#333333;
	margin-bottom:10px;
	line-height: 18px;
}
.top .txt .upImg{
	position: relative;
}
.top .txt .upImg .text{
	    line-height:18px;
    font-size: 12px;
    color: #53306c;
    border-bottom: 1px solid #53306c;
    display: block;
}
.top .txt .upImg .files{
	position: absolute;
    left: 0px;
    top: 0px;
    bottom: 0px;
    width: 100%;
    opacity: 0;
    cursor: pointer;
    z-index:2;
    padding:0px;

}
.top .right{
	/*float: right;
	padding-top: 22px;*/
}
.signOut{
	font-size: 18px;
	color:#53306c;
	padding-left:26px;
	background: url(../../assets/signOut.png) no-repeat left center;
	background-size:20px auto;
}
.bottom{
	padding:3.7rem 5% 1.6rem 5.9%;
}
.bottom ul{
	width:100%;
	max-width:550px;
}
.bottom li{
	overflow: hidden;
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
}
.bottom li .name{
	float: left;
	font-size: 14px;
	line-height: 50px;
}
.bottom li .text{
	/*width:100%;*/
	padding:0px 10px;
	flex:1;
	overflow: hidden;
	height: 50px;
	line-height: 50px;
	border:1px solid #e5e5e5;
	border-radius: 4px;
}
.btn{
	padding-top:22px;
	padding-left: 70px;
}
.save{
	width:100%;
	display: block;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-size: 14px;
	color:#fff;
	border-radius: 4px;
	background: #53306c;
}
.nametitle{
		font-size: 1.5rem;
		color:#53306c;
		text-align: center;
		line-height: 2.5rem;
		margin-bottom: 1.5rem;
		margin-top:1.5rem;
		display: none;
	}
.right1{
  display: none;
}
@media only screen and (min-width:960px) and (max-width:1440px){
		.main{
			padding:1.5rem 2rem;
		}
    .right1{
    display: none;
    }
    .right2{
    display: block;
     }
	}
	@media only screen and (min-width: 320px) and (max-width: 959px) {
		.main{
			padding: 0px 1.5rem 1.5rem 1.5rem;
		}
		.nametitle{
			display: block;
		}
    .right1{
      display: none;
    }
    .right2{
      display: block;
    }
	}
	@media only screen and (min-width: 320px) and (max-width:640px){
		.bottom{
			padding:1.5rem;
		}
		.bottom li{
			flex-direction:column;
		}
		.bottom li .name{
			float: none;
		}
		.btn{
			padding-left: 0px;
		}
    .right2{
      display: none;
    }
    .right1{
      display: block;
    }
		/*.signOut{
			font-size: 14px;
			background: none;
		}*/
	}
/**新增**/
@media only screen and (min-width:480px) and (max-width: 768px) {
  .list li{
    -webkit-flex:0 0 50%;
    -moz-flex:0 0 50%;
    -ms-flex:0 0 50%;
    -o-flex:0 0 50%;
    flex:0 0 50%;
  }
}
@media only screen and (min-width:320px) and (max-width:479px) {
  .list li{
    -webkit-flex:0 0 100%;
    -moz-flex:0 0 100%;
    -ms-flex:0 0 100%;
    -o-flex:0 0 100%;
    flex:0 0 100%;
  }
}
</style>
